<template>
  <div class="workload-content">
    <avue-crud
      :option="options"
      v-model="form"
      :table-loading="loading"
      :data="data"
      ref="crud"
      @on-load="onLoad"
      @tree-load="treeLoad"
      @row-click="handleRowClick"
    ></avue-crud>
    <div class="view-crf-delete">
      <el-button
        type="primary"
        style="width: 145px"
        v-if="!isCRFTable"
        plain
        @click="handleCrfTable"
        >查看CRF采集详情</el-button
      >
      <div class="view-crf-delete-name">
        <span class="yjz-name">研究者名称</span>
        <span class="brs-num">每张CRF采集病人数</span>
      </div>
    </div>
    <avue-crud
      v-if="isCRFTable"
      :option="options1"
      v-model="form1"
      :table-loading="loading1"
      :data="data1"
      ref="crud1"
      :span-method="spanMethod"
    ></avue-crud>

    <!-- <div class="view-crf-delete" style="margin-top: 20px;">
      <el-button type="primary" style="width: 145px;" v-if="!isJCTable" plain @click="isJCTable = true">查看稽查详情</el-button>
      <div class="view-crf-delete-name" style="justify-content: space-between;">
        <span class="jc-name">稽查员名称</span>
        <span class="jc-name">稽查病人数</span>
        <span class="jc-name">稽查CRF数</span>
      </div>
    </div>
    <avue-crud
     v-if="isJCTable"
      :option="options2"
      v-model="form2"
      :table-loading="loading2"
      :data="data2"
      ref="crud2"
    ></avue-crud> -->
  </div>
</template>
<script setup>
import { getLazyList } from '@/api/illness/illness';
import { deptGzl, caseNumOfCrf,deptGzlOfUser } from '@/api/trial/trial';
import { ref, reactive, computed, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import * as echarts from 'echarts';
const route = useRoute();
const router = useRouter();
const crud = ref(null);
const store = useStore();
const routerQuery = ref({});
routerQuery.value = route.query;
let isCRFTable = ref(false);
let isJCTable = ref(false);

let query = ref({});
const form = ref({});
let loading = ref(false);
const options = ref({
  height: '150',
  // calcHeight: 30,
  tip: false,
  searchShow: true,
  searchMenuSpan: 6,
  border: true,
  index: false,
  viewBtn: true,
  selection: false,
  dialogClickModal: false,
  indexWidth: 80,
  indexLabel: '编号',
  align: 'center',
  searchMenuSpan: 18,
  searchMenuPosition: 'right',
  rowKey: 'deptid',
  rowParentKey: 'deptid',
  lazy: true,
  labelWidth: 120,
  menu: false,
  addBtn: false,
  refreshBtn: false,
  columnBtn: false,
  gridBtn: false,
  column: [
    {
      label: '机构名称',
      prop: 'deptname',
      type:'input',
      // type: 'tree',
      // dicUrl: '/api/blade-system/dept/tree',
      // props: {
      //   label: 'title',
      //   value: 'id',
      // },
      filterable: true,
      overHidden: true,
    },
    {
      label: '采集病人数',
      prop: 'casenum',
      type: 'input',
    },
    {
      label: '采集CRF数',
      prop: 'crfnum',
      type: 'input',
    },
  ],
});
const data = ref([]);
const parentId = ref(0);

const crud1 = ref(null);
const form1 = ref({});
let loading1 = ref(false);
const options1 = ref({
  height: '150',
  // calcHeight: 30,
  tip: false,
  searchShow: true,
  searchMenuSpan: 6,
  border: true,
  index: false,
  viewBtn: true,
  selection: false,
  dialogClickModal: false,
  indexWidth: 80,
  indexLabel: '编号',
  align: 'center',
  searchMenuSpan: 18,
  searchMenuPosition: 'right',
  labelWidth: 120,
  menu: false,
  addBtn: false,
  refreshBtn: false,
  columnBtn: false,
  gridBtn: false,
  column: [],
});
const data1 = ref([]);

const crud2 = ref(null);
const form2 = ref({});
let loading2 = ref(false);
const options2 = ref({
  height: '150',
  // calcHeight: 30,
  tip: false,
  searchShow: true,
  searchMenuSpan: 6,
  border: true,
  index: false,
  viewBtn: true,
  selection: false,
  dialogClickModal: false,
  indexWidth: 80,
  indexLabel: '编号',
  // align: 'center',
  searchMenuSpan: 18,
  searchMenuPosition: 'right',
  rowKey: 'id',
  rowParentKey: 'parentId',
  lazy: true,
  labelWidth: 120,
  menu: false,
  addBtn: false,
  showHeader: false,
  refreshBtn: false,
  columnBtn: false,
  gridBtn: false,
  column: [
    {
      label: '机构名称',
      prop: 'deptId',
      type: 'tree',
      dicUrl: '/api/blade-system/dept/tree',
      props: {
        label: 'title',
        value: 'id',
      },
      filterable: true,
      overHidden: true,
    },
    {
      label: '采集病人数',
      prop: 'brs',
      type: 'input',
    },
    {
      label: '采集CRF数',
      prop: 'crf',
      type: 'input',
    },
  ],
});
const data2 = ref([]);
const props = defineProps({
  sendTrialVal: {
    type: Object,
    default: {},
  },
});
const handleCrfTable = () => {
  isCRFTable.value = true;
  loading1.value = true;
  caseNumOfCrf(props.sendTrialVal.id).then(res => {
    const DATA = res.data.data;
    options1.value.column = [
      {
        label: '',
        prop: 'userName',
      },
    ];
    let userNameList = Object.keys(DATA).filter(key => key !== 'title');
    let dataVal = Object.keys(DATA)
      .filter(key => key !== 'title')
      .map(key => DATA[key]);
    DATA.title.forEach((item, index) => {
      options1.value.column.push({
        label: item,
        prop: index,
      });
    });
    dataVal.forEach((v, i) => {
      data1.value.push({
        userName: userNameList[i],
        ...v,
      });
    });
    loading1.value = false;
  });
};
const onLoad = (page, params = {}) => {
  loading.value = true;
  deptGzl(props.sendTrialVal.id).then(res => {
    const DATA = res.data.data;
    console.log(DATA);
    // DATA.forEach(item => {
    //   item.hasChildren = true;
    // });
    data.value = DATA;
    // data.value[0].hasChildren = true;
    loading.value = false;
  });
};
let rowClickList = ref([]);
const handleRowClick = (row, event, column) => {
  if(!row.deptid) return;
  if(rowClickList.value.includes(row.deptid)) return;
  rowClickList.value.push(row.deptid);
  deptGzlOfUser(props.sendTrialVal.id,row.deptid).then(res => {
    const DATA = res.data.data;
    DATA.forEach(item => {
      item.deptname = item.uname;
      data.value.splice(row.$index + 1, 0, item)
    });
  });
};
const treeLoad = (tree, treeNode, resolve) => {
  console.log(tree, treeNode, resolve);
  const parentId = tree.deptid;
  deptGzl(parentId).then(res => {
    resolve(res.data.data);
  });
};
</script>
<style scoped lang="scss">
.workload-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  ::v-deep .avue-crud__header {
    display: none;
  }
}
.view-crf-delete {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}
.view-crf-delete-name {
  width: 100%;
  height: 35px;
  display: flex;
  align-items: center;
  color: black;
  font-size: 13px;
  border: 1px solid #ebeef5;
  border-bottom: none;
}
.yjz-name {
  width: 120px;
  text-align: center;
}
.brs-num {
  width: calc(100% - 120px);
  text-align: center;
}
.jc-name {
  width: 30%;
  text-align: center;
}
</style>